<template>
	<view class="select-city-wrap">
		<view class="select-city">
			<view class="index">
				<view class="index-item" @click="scrollTo('#')">#</view>
				<view class="index-item" v-for="item in citys" :key="item.letter" @click="scrollTo(item.letter)">{{ item.letter }}</view>
			</view>
			<view class="search">
				<image src="/static/icon/cha.png" class="search-image" mode="" @tap="Back"></image>
				<input type="text" class="search-input" value="" placeholder="请输入城市名称" @blur='changeValue' />
			</view>
			<scroll-view :scroll-into-view="scrollIntoId" :scroll-y="true" :scroll-with-animation="true" :style="{ height: windowHeight }">
				<view class="content">
					<view class="section" id="current">
						<view class="city-title">定位/历史</view>
						<view class="city-list">
							<view class="city-item">
								<view style="display: flex;align-items: center;color: #3595f9;justify-content: center;">
									<image src="/static/icon/adress-blue.png" style="width: 26upx;height: 26upx;margin-right: 8upx;"></image>
									<text>{{ current.SHORT_NAME || '暂无' }}</text>
								</view>
							</view>
							<view class="city-item">{{ oldCity.SHORT_NAME || '暂无' }}</view>
						</view>
					</view>
					<view class="section" id="hot" v-if="hotCitys.length">
						<view class="city-title">热门城市</view>
						<view class="city-list">
							<view class="city-item" :class="{ active: current.SHORT_NAME == city.SHORT_NAME }" v-for="(city, i) in hotCitys" :key="i" @click="onSelect(city)">{{ city.SHORT_NAME }}</view>
						</view>
					</view>
					<view class="section" :id="item.letter" v-for="item in citys" :key="item.letter">
						<view class="letter">{{ item.letter }}</view>
						<view class="city-list">
							<view class="city-item" :class="{ active: current.SHORT_NAME == city.SHORT_NAME }" v-for="(city, itemIndex) in item.list" :key="itemIndex"
							 @click="onSelect(city)">
								{{ city.SHORT_NAME }}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import pinyin from './city.js'
	export default {
		data() {
			return {
				hotCitys: [],
				citys: [],
				city:[],
				windowHeight: '',
				scrollIntoId: 'F',
				current: ''
			};
		},
		onLoad(e) {
			this.getLocation()
			this.pinyin_hanzi()
		},
		mounted() {
			this.getSystemInfo();
		},
		methods: {
			pinyin_hanzi() {
				let zimu = ['A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','W','X','Y','Z']
				const citys = [];
				for(let i = 0; i<zimu.length;i++){
					citys.push({
						letter:zimu[i],
						list:[]
					})
				}
				this.getReq({
					url: 'api/regional/get_all_city'
				}).then(data => {
					let hotCitys = ['北京','上海','深圳','广州','西安','重庆']
					data[1].data.data.forEach(val => {
						let fst = pinyin.chineseToPinYin(val.SHORT_NAME)[0]; //首字母
						if(hotCitys.indexOf(val.SHORT_NAME) != -1){
							this.hotCitys.push(val)
						}
						citys.forEach(item=>{
							if(fst == item.letter){
								item.list.push(val)
							}
						})
					})
					this.citys = citys
					this.city = citys
				})
			},
			getLocation() {
				uni.showLoading({
					title: '加载中',
					success: () => {
						uni.getLocation({
							type: 'wgs84',
							geocode: true,
							success: res => {
								uni.hideLoading();
								// #ifdef APP-PLUS
								this.current = res.address.city;
								// #endif
								// #ifndef APP-PLUS
								this.showToast('请用手机获取地址，模拟器不支持');
								// #endif	
								this.$store.state.city = this.current
							}
						});
					}
				});
			},
			getSystemInfo() {
				uni.getSystemInfo().then(res => {
					/**
					 * 设备信息
					 */
					let [error, data] = res;
					this.windowHeight = `${data.windowHeight}px`;
				});
			},
			changeValue(e) {
				let value = e.detail.value
				if (!value) {
					this.citys = this.city;
					return;
				}
				let newCitys = [];
				this.city.forEach(val => {
					val.list.forEach(item => {
						if (item.SHORT_NAME.indexOf(value) != -1) {
							newCitys.push(item)
						}
					})
				})
				this.citys = [{
					letter: '&',
					list: newCitys
				}]
			},
			scrollTo(letter) {
				/**
				 * 字母快捷定位
				 */
				this.scrollIntoId = letter === '#' ? 'current' : letter;
			},
			Back() {
				/**
				 * 返回主页
				 */
				uni.navigateBack();
			},
			onSelect(city) {
				this.current = city;
				this.$store.state.oldCity = this.$store.state.city
				this.$store.state.city = this.current
			}
		},
		computed: {
			oldCity() {
				return this.$store.state.oldCity
			}
		},
	};
</script>

<style lang="scss" scoped>
	.select-city-wrap {
		position: relative;
		padding-top: var(--status-bar-height);
		background-color: #fff;
	}

	.select-city {
		.index {
			position: fixed;
			right: 0;
			top: 200upx;
			z-index: 999;
			color: #2f9bfe;
			font-size: 32upx;

			.index-item {
				width: 40upx;
				height: 42upx;
				line-height: 42upx;
				text-align: center;
			}
		}

		.search {
			height: 88upx;
			padding-left: 30upx;
			display: flex;
			align-items: center;
			border-bottom: 1upx solid #e5e5e5;

			.search-image {
				width: 30upx;
				height: 30upx;
				margin-right: 58upx;
			}

			input.search-input[type="text"] {
				font-size: 24upx;
			}

			.search-input {
				width: 524upx;
				height: 60upx;
				background-color: #f0f0f0;
				border-radius: 30upx;
				text-align: center;
				line-height: 60upx;
				font-size: 24upx;
			}
		}

		.section#current,
		#hot {
			background-color: #f8f8f8;
		}

		.section {
			width: 690upx;
			padding: 19upx 0 19upx 30upx;

			.city-title {
				color: #999;
				font-size: 28upx;
				margin-bottom: 28upx;
			}

			.letter {
				width: 44upx;
				height: 44upx;
				color: #fff;
				border-radius: 100%;
				background-color: #2f9bfe;
				font-size: 28upx;
				line-height: 44upx;
				text-align: center;
				margin-bottom: 30upx;
			}

			.city-list {
				display: flex;
				flex-wrap: wrap;

				.city-item {
					width: 190upx;
					height: 55upx;
					margin-right: 36upx;
					margin-bottom: 28upx;
					line-height: 55upx;
					text-align: center;
					border: 1px solid #dcdcdc;
					border-radius: 6upx;
					color: #999;
					font-size: 28upx;

					&.active {
						background-color: #d5ebff;
						border-color: #2f9bfe;
						color: #2f9bfe;
					}
				}
			}
		}
	}
</style>
